import React from 'react'
import { Form, Input, Button, message } from 'antd'
import { useNavigate, Link } from 'react-router-dom'
import { apiLogin } from '../../api/auth'
import './Login.css'

type LoginForm = {
  username: string
  password: string
}

function Idnex() {
  const navigate = useNavigate()

  const onFinish = async (values: LoginForm) => {
    try {
      const res = await apiLogin(values)
      if (res.status === 200) {
        const accessToken = res.data?.data?.accessToken || res.data?.accessToken
        const refreshToken = res.data?.data?.refreshToken || res.data?.refreshToken
        const backendUser = res.data?.data?.user || res.data?.user || { username: values.username }
        const role = String(backendUser?.username || values.username).startsWith('admin') ? 'admin' : 'user'
        const user = { ...backendUser, role }
        if (accessToken) localStorage.setItem('token', accessToken)
        if (refreshToken) localStorage.setItem('refreshToken', refreshToken)
        if (user) localStorage.setItem('auth_user', JSON.stringify(user))
        message.success(res.data?.message || '登录成功')
        if (role === 'admin') {
          alert('管理员登录成功')
        } else {
          alert('用户登录成功')
        }
        navigate('/home')
      } else {
        message.error(res.data?.message || '登录失败')
      }
    } catch (e: any) {
      const msg = e?.response?.data?.message || '登录失败'
      message.error(msg)
    }
  }

  return (
    <div className="login-container">
      <div className="login-topbar">
        <div className="topbar-inner">
          <span className="topbar-title">数字人管理系统 · 登录</span>
        </div>
      </div>

      <div className="cyber-grid" />
      <div className="terrain" />

      <div className="meteors" aria-hidden>
        <span className="meteor"/>
        <span className="meteor"/>
        <span className="meteor"/>
        <span className="meteor"/>
        <span className="meteor"/>
        <span className="meteor"/>
        <span className="meteor"/>
        <span className="meteor"/>
        <span className="meteor"/>
        <span className="meteor"/>
        <span className="meteor"/>
        <span className="meteor"/>
        <span className="meteor near"/>
        <span className="meteor near"/>
        <span className="meteor near"/>
      </div>

      <div className="ripples" aria-hidden>
        <div className="ripple r1"></div>
        <div className="ripple r2"></div>
        <div className="ripple r3"></div>
      </div>

      <div className="login-card neon-circle">
        <div className="card-header minimal">
          <h1 className="login-title">欢迎登录</h1>
          <p className="login-subtitle">请输入账号密码进入系统</p>
        </div>

        <Form<LoginForm> layout="vertical" onFinish={onFinish} autoComplete="off" className="login-form">
          <Form.Item<LoginForm> name="username" label="用户名" rules={[{ required: true, message: '请输入用户名' }]}>
            <div className="input-container">
              <Input placeholder="请输入用户名" className="login-input" />
              <div className="input-glow"></div>
            </div>
          </Form.Item>
          <Form.Item<LoginForm> name="password" label="密码" rules={[{ required: true, message: '请输入密码' }]}>
            <div className="input-container">
              <Input.Password placeholder="请输入密码" className="login-input" />
              <div className="input-glow"></div>
            </div>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-button" block>登录</Button>
          </Form.Item>
          <div className="auth-tip">
            还没有账号？<Link to="/register">去注册</Link>
          </div>
        </Form>
      </div>
    </div>
  )
}

export default Idnex
